<template>
        <el-menu default-active="1-4-1" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
            <h3>{{isCollapse?'后台':'通用后台管理系统'}}</h3>
  <el-menu-item v-for="v in noChildren" :index="v.path" :key="v.path" @click="clickMenu(v)">
    <i :class="'el-icon-'+v.icon"></i>
    <span slot="title">{{v.label}}</span>
  </el-menu-item>
  <el-submenu v-for="v in hasChildren" :index="v.path" :key="v.path">
    <template slot="title">
      <i :class="'el-icon-'+v.icon"></i>
      <span slot="title">{{v.label}}</span>
    </template>
    <el-menu-item-group v-for="(s,i) in v.children" :key="i">
      <el-menu-item :index="s.path" @click="clickMenu(s)">{{s.label}}</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>
</template>

<style lang="scss" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
      height: 100%;
      border: none;
      h3{
          color:white ;
          text-align: center;
          line-height: 48px;
      }
  }
</style>

<script>
import { mapState } from 'vuex';
  export default {
    data() {
      return {
        menu:[]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickMenu(v){
          this.$router.push({
              name:v.name
          })
          console.log(v);
          this.$store.commit('selectMenu',v)
      },
    },
    computed:{
        noChildren(){
          let asyncMenu=this.$store.state.menu
          console.log('menu',asyncMenu)
            return asyncMenu.filter(item=>!item.children)
        },
        hasChildren(){
          let asyncMenu=this.$store.state.menu
            return asyncMenu.filter(item=>item.children)
        },
        ...mapState(['isCollapse'])
    },
    asyncMenu(){
      return this.$store.state.menu
    }
  }
</script>